<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: HeAo
 * @LastEditTime: 2022-01-06 19:57:14
-->
<template>
  <div class="box">
    <div class="header">
      <span class="cell">设备名称</span>
      <span class="cell">状态</span>
    </div>
    <div class="body">
      <div class="list">
        <li v-for="(item, index) in devices" :key="index" class="row">
          <span class="cell">{{ item.name }}</span>
          <span class="cell">{{
            item.online_status == 1 ? "在线" : "离线"
          }}</span>
          <!-- <span v-for="n in 4" :key="n * 30" class="cell">{{ n }}</span> -->
        </li>
      </div>
    </div>
  </div>
</template>
 
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      resData: [],
      form: {},
      arr: [],
    };
  },
  computed: {
    devices() {
      let arr = [];
      this.resData.forEach((item) => {
        if (item.children.length > 0) {
          item.children.forEach((i) => {
            arr.push(i);
          });
        }
      });
      return arr;
    },
  },
  methods: {
    pageQueryEngineers() {
      get("dashboard/findEngineerDeviceTree").then((res) => {
        // 将后台接口的响应结果，赋值给resData
        this.resData = res.data;
      });
    },
  },
  created() {
    this.pageQueryEngineers();
    // this.arr = Array.from(new Array(20), (v, k) => {
    //   return k + 1;
    // });
    //表格显示5行数据，此处复制开头的5条数据实现无缝
    this.arr = this.arr.concat(this.arr.slice(0, 5));
  },
};
</script>
 
<style lang="scss">
$cellHeight: 30px;
.box {
  width: 90%;
  margin: auto;
  text-align: center;
}
.header {
  display: flex;
  font-weight: bold;
}
.body {
  height: 5 * $cellHeight;
  overflow: hidden;

  // padding-bottom: 10px;
  li {
    display: flex;
    height: $cellHeight;
  }
}
.cell {
  flex: 1;
  height: $cellHeight;
  line-height: $cellHeight;
  box-sizing: border-box;
  font-weight: bold;
}
.list {
  animation: scroll 10s linear infinite;
  position: relative;
}

@keyframes scroll {
  from {
    top: 0;
  }
  to {
    top: -10 * $cellHeight;
  }
}
</style>